<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ez图</title>
    <link rel="stylesheet" href="/static/js/element-ui/lib/theme-chalk/index.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui/lib/index.js"></script>
    <style>
        .box-header{
            padding-top: 2vh;
            background-image: linear-gradient(to right top, #6b7cd1, #6f84d6, #738dda, #7895de, #7e9de2, #82a4e6, #86aae9, #8bb1ed, #8fb8f1, #94bef5, #99c5f8, #9ecbfc);
            color: #fff;
        }
        .box-header{
            text-align: center;
        }
        .search-box {  
            display: flex;  
            align-items: center;  
            justify-content: space-between;  
            width: 100%;  
            max-width: 600px;  
            margin: 20px auto;  
            padding: 10px;  
            border: 1px solid #ddd;  
            border-radius: 5px;  
            background-color: #fff;  
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
        }  
        
        .search-input {  
            flex: 1;  
            padding: 5px;  
            font-size: 16px;  
            border: none;  
            border-radius: 4px 0 0 4px;  
            outline: none;  
        }  
        
        .search-button {  
            padding: 5px 10px;  
            font-size: 16px;  
            background-color: #5d77d6;  
            color: #fff;  
            border: none;  
            border-radius: 0 4px 4px 0;  
            cursor: pointer;  
        }  
        
        .search-button:hover {  
            background-color: #6784eb;  
        }  
        .item{
            width: 90vw;
            margin:20px auto;
            border-radius: 10px;
            background-color: #94bef5;
        }
    </style>
</head>

<body style="margin: 0px;">
    <div id="app">
        <el-container>
            <el-header height="32vh" class="box-header">
                <h1 class="box-header-h1">xx导航</h1>
                <div class="search-box">  
                    <input type="text" class="search-input" placeholder="输入搜索关键词">  
                    <button class="search-button">搜索</button>  
                </div>  
            </el-header>
            <el-main class="box-main">
                <!-- 内容 -->
                <div class="item" v-for="item in itemList">
                    <div class="item-title">{{item.title}}</div>
                    <div class="item-group" v-for="group in item.group">
                        <div class="item-group-single">
                            {{group.name}}
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>

    </div>
</body>
<script>
    // import {Menu,MenuItem} from 'element-ui';
    // import Element from 'element-ui';
    // Vue.use(Element);
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                itemList:[
                    {
                        title:'常用工具',
                        group:[
                            {
                                name:'在线时间戳'
                            },
                            {
                                name:'图片压缩'
                            }
                        ]
                    },
                    {
                        title:'本站工具',
                        group:[
                            {
                                name:'在线时间戳'
                            },
                            {
                                name:'ez图'
                            }
                        ]
                    },
                ]
            }
        },
        methods: {
            handleSelect() {
                console.log(1)
            }
        }
    })

</script>

</html>